<template>
  <div class="home-container">
    <!-- 头部区域 -->
    <van-nav-bar fixed>
      <template #left>
        <img src="../../assets/toutiao_logo.png" alt="logo" class="logo" />
      </template>
      <template #right>
        <van-icon name="search" color="white" size="18" />
      </template>
    </van-nav-bar>

    <!-- 频道列表 -->
    <van-tabs v-model:active="active" sticky offset-top="1.22667rem">
      <van-tab :title="item.name" v-for="item in channels" :key="item.id">
        <!-- 文章列表组件 -->
        <art-list :channelId="item.id"></art-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getChannelList } from '@/api/homeAPI'
import { onMounted, ref } from 'vue'
import ArtList from '@/views/Article/ArticleList.vue'

export default {
  name: 'Home',
  setup() {
    // 频道的列表数据
    const channels = ref([])
    // 激活项的索引
    const active = ref(0)

    // 生命周期函数
    onMounted(async () => {
      const { data: res } = await getChannelList()
      if (res.message === 'OK') {
        channels.value = res.data.channels
      }
    })

    return {
      channels,
      active
    }
  },
  components: {
    ArtList
  }
}
</script>

<style lang="less" scoped>
.home-container {
  padding-top: 46px;
  padding-bottom: 50px;
}

.logo {
  height: 80%;
}
</style>
